<template>
  <div
    class="main_box"
    style="padding-right:10px"
    v-loading="loading"
    element-loading-text="正在处理"
  >
    <div class="add_wrap">
      <div class="tit">
        <h2>批量修改呼叫器</h2>
        <el-button
          type="success"
          plain
          size="small"
          icon="fa fa-mail-forward"
          @click="returnList"
          >返回</el-button
        >
      </div>

      <el-form
        :model="dataForm"
        ref="dataForm"
        label-width="200px"
        :rules="roleRules"
      >
        <el-row>
          <el-form-item label="呼叫器类型" prop="beeperType">
            <el-select v-model="dataForm.beeperType" clearable filterable>
              <el-option
                v-for="item in beeperTypeList"
                :key="item.id"
                :value="item.id"
                :label="item.name"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="呼叫器版本" prop="beeperVersion">
            <el-select v-model="dataForm.beeperVersion" clearable filterable>
              <el-option
                v-for="item in beeperVersionList"
                :key="item.id"
                :value="item.id"
                :label="item.name"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="呼叫器分类" prop="beeperClassify">
            <el-select v-model="dataForm.classifyId" clearable filterable>
              <el-option
                v-for="item in beeperClassifyList"
                :label="item.name"
                :value="item.id"
                :key="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="呼叫器内容显示" prop="showLevel">
            <el-select v-model="dataForm.showLevel" clearable filterable>
              <el-option
                v-for="item in showLevelList"
                :label="item.name"
                :value="item.id"
                :key="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="业务员" prop="saleUserId">
            <el-select v-model="dataForm.saleUserId" clearable filterable>
              <el-option
                v-for="item in saleUserList"
                :label="item.name"
                :value="item.id"
                :key="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="收货地址设置" prop="addressType">
            <el-select v-model="dataForm.addressType" clearable filterable>
              <el-option
                v-for="item in addressTypeList"
                :key="item.id"
                :value="item.id"
                :label="item.name"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="地区" prop="streetIds">
            <Region
              ref="region"
              :streetValues="dataForm.streetIds"
              @regionChange="handleItemChange"
              :isChangeOnSelect="true"
            ></Region>
          </el-form-item>
          <el-form-item label="小区" prop="villageId">
            <el-select
              v-model="dataForm.villageId"
              @focus="handleVillageFocus"
              clearable
            >
              <el-option
                v-for="item in villageList"
                :value="item.id"
                :label="item.name"
                :key="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="小区简码" prop="linkCode">
            <el-input v-model="dataForm.linkCode"></el-input>
          </el-form-item>
          <el-form-item label="wifi账号" prop="wifiName">
            <el-input v-model="dataForm.wifiName"></el-input>
          </el-form-item>
          <el-form-item label="wifi密码" prop="wifiPwd">
            <el-input v-model="dataForm.wifiPwd"></el-input>
          </el-form-item>
          <el-form-item label="详细地址" prop="address">
            <el-input v-model="dataForm.address" clearable> </el-input>
            <div style="color:red">不包含省市区街道</div>
          </el-form-item>
          <el-form-item label="默认进入" prop="defaultOpen">
            <el-select
              v-model="dataForm.defaultOpen"
              clearable
              :disabled="dataForm.showLevel ? true : false"
            >
              <el-option
                v-for="item in defaultOpenList"
                :key="item.id"
                :value="item.id"
                :label="item.name"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-row>
        <el-row type="flex" justify="center">
          <el-button plain type="primary" @click="sureClick(0)"
            >保 存</el-button
          >
          <el-button plain @click="returnList">取 消</el-button>
        </el-row>
      </el-form>
    </div>
  </div>
</template>

<script>
import * as message from "@/constants/message";
import BeeperApi from "@/api/equip/beeper";
import VillageApi from "@/api/address/village";
import BusinessApi from "@/api/business/business";
import ServerClassifyApi from "@/api/server/serverClassify";
import BeeperClassifyApi from "@/api/equip/beeperClassify";
import Region from "@/components/Region";
import ServerSelect from "@/components/ServerSelect";
import { getStorage } from "@/utils/auth";
import { USER_INFO } from "@/constants/storeName";
import SalesmanApi from "@/api/business/salesman";
export default {
  name: "BeeperAdd",
  data() {
    return {
      dataForm: {
        beeperIds: [],
        beeperType: "",
        beeperVersion: "",
        classifyId: "",
        saleUserId: "",
        defaultOpen: "",
        villageId: "",
        villageName: "",
        streetIds: [],
        provinceId: "",
        provinceName: "",
        cityId: "",
        cityName: "",
        areaId: "",
        areaName: "",
        streetId: "",
        streetName: "",
        wifiName: "",
        wifiPwd: "",
        linkCode: "",
        addressType: "",
        address: "",
        showLevel: ""
      },
      userList: [],
      roleRules: {},
      listLoading: false,
      detailRole: "",
      loading: false,
      selectedList: [], //
      villageList: [], //小区列表
      serverClassifyList: [], //二级分类集合
      // listLength:99, //服务信息最多可添加的数量
      saleUserList: [], //业务员列表
      beeperTypeList: [
        //呼叫器类型列表
        { id: 1, name: "公共" },
        { id: 2, name: "专属" }
      ],
      beeperVersionList: [
        // 呼叫器版本（1.虚拟版 2.基础版 3.智能版 4.触屏版 ）
        { id: 1, name: '虚拟版' },
        { id: 2, name: '基础版' },
        { id: 3, name: '智能版' },
        { id: 4, name: '触屏版' },
        { id: 5, name: 'WIFI语音版' },
        { id: 6, name: '全网通语音版' },
        { id: 7, name: '物联网卡版' },
      ],
      defaultOpenList: [{ id: 1, name: "精选" }, { id: 2, name: "全部" }],
      addressTypeList: [
        { id: 1, name: "呼叫器地址及联系人" },
        { id: 2, name: "呼叫器地址和下单联系人" },
        { id: 3, name: "符合条件的就近收货地址" },
        { id: 4, name: "呼叫器地址和门牌号" },
        { id: 5, name: "用户新地址" }
      ],
      showLevelList: [{ id: 0, name: "全部" }, { id: 1, name: "仅精选" }],
      beeperClassifyList: []
    };
  },
  mounted() {
    this.init();
  },
  activated() {},
  watch: {
    "dataForm.showLevel": {
      handler(val) {
        if (val) {
          this.dataForm.defaultOpen = 1;
        }
      },
      immediate: true
    }
  },
  computed: {},
  components: {
    Region
  },

  methods: {
    init() {
      const beeperIds = localStorage.getItem("beeperIds");
      this.dataForm.beeperIds = beeperIds ? JSON.parse(beeperIds) : [];
      this.getSaleUserList();
      this.getBeeperClassifyList();
    },
    keydown(e) {
      if (e.keyCode == 32) {
        e.returnValue = false;
      }
    },
    getSaleUserList() {
      SalesmanApi.getSalesmanIdName().then(res => {
        this.saleUserList = res.data;
      });
    },
    getBeeperClassifyList() {
      BeeperClassifyApi.beeperClassifyList().then(res => {
        this.beeperClassifyList = res.data;
      });
    },
    handleVillageChange() {
      if (this.dataForm.villageId) {
        this.dataForm.villageName = this.villageList.find(
          item => item.id == this.dataForm.villageId
        ).name;
      } else {
        this.dataForm.villageName = "";
      }

      this.serverModelList = [];
      this.dataForm.serverModelId = "";
      this.dataForm.beeperBtnList = [];
      this.dataForm.stackId = "";
    },
    handleVillageFocus() {
      // 点击聚焦小区的时候才发送请求数据
      if (this.dataForm.streetIds.length > 0) {
        let param = {
          provinceId: this.dataForm.provinceId,
          cityId: this.dataForm.cityId,
          areaId: this.dataForm.areaId,
          streetId: this.dataForm.streetId,
          name: ""
        };
        VillageApi.villageList(param).then(res => {
          this.villageList = res.data;
        });
      }
    },
    handleItemChange(val) {
      // 地区改变要清空小区和设备地址还有列表
      this.dataForm.villageId = "";
      this.dataForm.villageName = "";
      this.villageList = [];
      this.dataForm.provinceId = val.provinceId;
      this.dataForm.provinceName = val.provinceName;
      this.dataForm.cityId = val.cityId;
      this.dataForm.cityName = val.cityName;
      this.dataForm.areaId = val.areaId;
      this.dataForm.areaName = val.areaName;
      this.dataForm.streetId = val.streetId;
      this.dataForm.streetName = val.streetName;
      if (val.provinceId) {
        // 如果地区是删除那么就不用删除列表和设备地址数据
        this.dataForm.streetIds = [
          val.provinceId,
          val.cityId,
          val.areaId,
          val.streetId
        ];
      } else {
        this.dataForm.streetIds = [];
      }
    },
    async sureClick() {
      await this.$confirm("确定批量修改","提示",{})
      var cond = {
        beeperType: this.dataForm.beeperType||null,
        beeperVersion: this.dataForm.beeperVersion||null,
        addressType: this.dataForm.addressType||null,
        address: this.dataForm.address||null,
        classifyId: this.dataForm.classifyId||null,
        defaultOpen: this.dataForm.defaultOpen||null,
        provinceId: this.dataForm.provinceId||null,
        provinceName: this.dataForm.provinceName||null,
        cityId: this.dataForm.cityId||null,
        cityName: this.dataForm.cityName||null,
        areaId: this.dataForm.areaId||null,
        areaName: this.dataForm.areaName||null,
        streetId: this.dataForm.streetId||null,
        streetName: this.dataForm.streetName||null,
        villageId: this.dataForm.villageId||null,
        villageName: this.dataForm.villageNamev,
        wifiName: this.dataForm.wifiName||null,
        wifiPwd: this.dataForm.wifiPwd||null,
        linkCode: this.dataForm.linkCode||null,
        saleUserId: this.dataForm.saleUserIdv,
        showLevel: this.dataForm.showLevel||null,
        beeperIds: this.dataForm.beeperIds||null
      };
      BeeperApi.batchUpdateBeeper(cond)
        .then(() => {
          this.$Utils.notifySuccess();
          this.returnData();
          localStorage.removeItem("beeperIds")
        })
        .finally(() => {
          this.loading = false;
        });
    },
    returnData() {
        this.$router.push({ name: 'BeeperManagement', params: { list: true } })
    },
    returnList() {
      // 返回上一界面
      this.$store.dispatch('delView', this.$route);
      this.$router.back()
    }
  }
};
</script>

<style lang="scss" scoped>
@import "@/assets/css/views/add.scss";
</style>
<style lang="scss">
.module-form {
  overflow: hidden;

  .el-form-item {
    .el-cascader {
      width: 310px !important;
    }

    .el-select {
      width: 220px !important;
    }

    width: fit-content !important;
  }
}
</style>
